<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            const checkall = document.getElementById('check-all');
            const checkboxs = document.getElementsByName('hobby');
            checkall.onclick = function () {
                for (let box of checkboxs) {
                    box.checked = this.checked;
                }
            };

            const all = document.getElementById('all');
            all.onclick = function () {
                for (let box of checkboxs) {
                    box.checked = true;
                    checkall.checked = true;
                }
            };

            const no = document.getElementById('no');
            no.onclick = function () {
                for (let box of checkboxs) {
                    box.checked = false;
                    checkall.checked = false;
                }
            };

            const reverse = document.getElementById('reverse');
            reverse.onclick = function () {
                for (let box of checkboxs) {
                    box.checked = !box.checked;
                    checkall.checked = false;
                }
                let allChecked = true;
                for (let box of checkboxs) {
                    if (!box.checked) {
                        allChecked = false;
                        break;
                    }
                }
                checkall.checked = allChecked;
            };

            const send = document.getElementById('send');
            send.onclick = function () {
                let hobby = [];
                for (let box of checkboxs) {
                    if (box.checked) {
                        hobby.push(box.value);
                    }
                }
                alert(hobby);
            };
        }
    </script>
</head>

<body>
    <div>
        <form action="#">
            <div>
                请选择你的爱好:
                <input type="checkbox" id="check-all"> 全选
            </div>
            <div>
                <input type="checkbox" name="hobby" value="乒乓球">乒乓球
                <input type="checkbox" name="hobby" value="篮球">篮球
                <input type="checkbox" name="hobby" value="羽毛球">羽毛球
                <input type="checkbox" name="hobby" value="足球">足球
            </div>
            <div>
                <button type="button" id="all">全选</button>
                <button type="button" id="no">取消</button>
                <button type="button" id="reverse">反选</button>
                <button type="button" id="send">提交</button>
            </div>
        </form>
    </div>
</body>

</html>